 
<!-- 详情 -->
<template>
  <div class="detail">
    <div class="detail_title df jc-sb w100 ai-c">
      <div style="white-space: nowrap;padding-left: 20px;box-sizing:border-box;" class="df-c">
        <!--  v-if="system&& system.roles.includes('superadmin')" -->
        <lay-button size="sm" type="primary" v-if="system&& system.roles.includes('superadmin') &&isEditFull == '1'" @click="edit_msg">{{ editBtn?'完成':'修改填写信息' }}</lay-button>

      </div>
      <h1>{{ '对比评吸详情' }}</h1><lay-button size="sm" @click="close">关闭</lay-button>
    </div>

    <div class="detail_content">
      <div v-if="dataKey.length>0">
        <div class="detail_tabs">
          <el-scrollbar style="width:  '100%' ;white-space: nowrap;background:'#fff' ">
            <ul class="df" style="height:45px;background-color: #fff;">
              <li v-for="(item, index) in dataKey2" :key="index" style="padding:0 6px;cursor: pointer;" class="df jcc ai-c" @click="tab_change(item.label,item.status)">
                <span
                  :style="{color:item.status=='1'?'#1e9fff':'red',padding:'8px 16px','border-bottom':`${tabCurrent==item.label?'2px solid ':''}`,'border-color':`${item.status=='1'?'#1e9fff':'red'}`}">{{item.label}}</span>
              </li>
            </ul>
          </el-scrollbar>
        </div>
        <!-- <lay-tab type="brief" v-model="tabCurrent" @change="tab_change">
          <lay-tab-item :title="item.label" :id="item.label" v-for="(item, index) in dataKey2" :key="index">
            <template #title>
              <div style="background-color: #fff;width: 100%;">
                <span v-if="item.status=='1'" :style="{color:'#1e9fff'}">{{item.label}}</span>
                <span v-else :style="{color:'red'}">{{item.label}}</span>
              </div>
            </template>
          </lay-tab-item>

        </lay-tab> -->

        <lay-scroll height="94%" style="" thumbColor="#f5f5f5">
          <lay-container>
            <table>
              <thead>
                <tr>
                  <th colspan="2">项目</th>
                  <th colspan="3">光泽</th>
                  <th colspan="3">香气</th>
                  <th colspan="3">协调</th>
                  <th colspan="3">杂气</th>
                  <th colspan="3">刺激性</th>
                  <th colspan="3">余味</th>
                  <th></th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td rowspan="2">样品编号</td>
                  <td rowspan="2">牌别</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td>|</td>
                  <td>||</td>
                  <td>|||</td>
                  <td rowspan="2">合计</td>
                  <td rowspan="2">均值</td>
                </tr>
                <tr>
                  <td>5</td>
                  <td>4</td>
                  <td>3</td>
                  <td>32</td>
                  <td>28</td>
                  <td>24</td>
                  <td>6</td>
                  <td>5</td>
                  <td>4</td>
                  <td>12</td>
                  <td>10</td>
                  <td>8</td>
                  <td>20</td>
                  <td>17</td>
                  <td>15</td>
                  <td>25</td>
                  <td>22</td>
                  <td>20</td>
                </tr>

                <template v-for="(item,index) in tableData" :key="item.id">
                  <tr v-if="item.number !== '标样'">
                    <td>{{ item.number }}</td>
                    <td>{{ item.smokeModel }}</td>
                    <td colspan="3">
                      <!-- {{ item.smokeGloss }} -->
                      <el-input @blur="inp_blue(item, 'smokeGloss')" v-if="editBtn" v-model="item.smokeGloss" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeGloss)}}</div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeAroma?.toFixed(1)|| '' }} -->
                      <el-input @blur="inp_blue(item, 'smokeAroma')" v-if="editBtn" v-model="item.smokeAroma" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeAroma) }} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeHarmony|} -->
                      <el-input @blur="inp_blue(item, 'smokeHarmony')" v-if="editBtn" v-model="item.smokeHarmony" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeHarmony) }} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeImpure|} -->
                      <el-input @blur="inp_blue(item, 'smokeImpure')" v-if="editBtn" v-model="item.smokeImpure" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeImpure) }} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeThrill|} -->
                      <el-input @blur="inp_blue(item, 'smokeThrill')" v-if="editBtn" v-model="item.smokeThrill" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeThrill) }} </div>
                    </td>
                    <td colspan="3">
                      <!-- {{ item.smokeAftertaste|} -->
                      <el-input @blur="inp_blue(item, 'smokeAftertaste')" v-if="editBtn" v-model="item.smokeAftertaste" size="small" style="width: 70px;" :data-index="index"></el-input>
                      <div v-else> {{is_NaN(item.smokeAftertaste) }} </div>
                    </td>
                    <td colspan="1">
                      <!-- {{ item.smokeTotal|} -->
                      <!-- <el-input @blur="inp_blue(item, 'smokeTotal')" v-if="editBtn" v-model="item.smokeTotal" size="small" style="width: 70px;" :data-index="index"></el-input> -->
                      <div> {{is_NaN(item.smokeTotal) }} </div>
                    </td>
                    <td>
                      <!-- {{ getMean(item.smokeModel) }} -->
                      <span v-if="item.workStatus=='1'"> {{  isNaN(getMean(item.smokeModel,item.number))?'计算中':getMean(item.smokeModel,item.number) }}</span>
                      <span v-else>-</span>

                    </td>
                  </tr>

                  <tr v-if="(index+1)%2==0">
                    <td>评价结果和文字描述：</td>
                    <td colspan="21" style="text-align-last: left;">
                      <el-input @blur="inp_blue(item, 'evaluateResults')" v-if="editBtn" v-model="item.evaluateResults" size="small" style="width: 100%" :data-index="index"></el-input>
                      <span v-else>{{item.evaluateResults || '-'}}</span>

                    </td>
                  </tr>
                </template>
              </tbody>
            </table>

          </lay-container>
        </lay-scroll>

      </div>

      <div v-else>
        <lay-empty description="暂无数据"></lay-empty>
      </div>
    </div>

  </div>
</template> 
    
    <script setup lang="ts">
import http from "@/http";
import { onMounted, ref, onBeforeUnmount, reactive, watchEffect, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterStore } from "@/current";
import { storeToRefs } from "pinia"; // cnpm i pinia --save  2.1.3
import { layer } from "@layui/layer-vue";
const store = useCounterStore();
const { system } = storeToRefs(store); //  数据

const router = useRouter();
const route = useRoute();
const id = ref(route.query.id);
const meetingStatus = ref(route.query.status);
let oldList: Array<any> = [];

const is_NaN = (num) => {
  let result: any = parseFloat(num);
  result = isNaN(result) ? "" : result.toFixed(1);

  return result;
};

const getMean = (e, i) => {
  console.log(info.value);
  let num = 0;
  let length = 0;
  Object.keys(info.value).forEach((item) => {
    console.log(info.value[item]);
    info.value[item].forEach((ele) => {
      console.log(ele.smokeModel, e);

      if (ele.smokeModel == e && ele.number == i && ele.workStatus == "1") {
        num += ele.smokeTotal;
        length += 1;
      }
    });
  });

  return (num / length).toFixed(1);
};

// 实时刷新页面数据
const isStartInter = ref(false);
const timer = ref<any>(null);
onMounted(() => {
  get_list();

  startTimer();
});
 
const startTimer = () => {
  if (meetingStatus.value == "2") {
    return false;
  }

  timer.value = setInterval(() => {
    isStartInter.value = true;
    get_list();
  }, 3000);
};

onBeforeUnmount(() => {
  clearInterval(timer.value);
});
// 选项卡绑定
const isEditFull = ref()
const tabCurrent = ref("");
// 选项卡切换事件
const tab_change = (e,status) => {
  if(editBtn.value){
    layer.msg('修改状态不能切换',{icon:2})
    return false
  }
  console.log(e);
  isEditFull.value = status
  tabCurrent.value = e;
  console.log(info.value);
  tableData.value = info.value[e];
  oldList = JSON.parse(JSON.stringify(info.value[e]));
};
const tableData = ref<any>([]);
const info = ref([]);
let info2 = [];

watchEffect(async () => {
  console.log(info2);
  console.log(info.value);
});

// key 值数组
const dataKey = ref<string[]>([]);
const dataKey2 = ref<any>([]);
const get_list = async () => {
  // dataKey2.value.unshift()
  try {
    const res = await http.corsApi(`/smokeMeeting/contrastDetails/${id.value}`, "get", {});
    console.log("get_list", res);
    info.value = res.data;
    info2 = res.data;
    console.log(Object.keys(res.data));
    if (res.data) {
      dataKey.value = Object.keys(res.data);

      let arr2: any = [];
      dataKey.value.forEach((item: any) => {
        console.log(res.data[item]);
        arr2.push({ label: item, status: res.data[item][0].workStatus });
      });
      dataKey2.value = [...arr2];

      console.log(" dataKey2.value ", dataKey2.value);

      if (!isStartInter.value || tabCurrent.value == "") {
        tabCurrent.value = dataKey.value[0];
        isStartInter.value = true;

        isEditFull.value = dataKey2.value[0].status
      }
      tableData.value = res.data[tabCurrent.value];
      oldList = JSON.parse(JSON.stringify(res.data[tabCurrent.value])) || [];
    }
  } catch (err) {
    console.log(err);
  }

  console.log(dataKey.value);
  console.log(tableData.value);
};

// 修改填写信息
const editBtn = ref(false);
const edit_msg = () => {
  editBtn.value = !editBtn.value;

  if (editBtn.value) {
    clearInterval(timer.value);
  } else {
    startTimer();
  }
};

const dicts: Array<any> = [
  { title: "光泽", key: "smokeGloss", len: 0.1, area: [0, 5] },
  { title: "香气", key: "smokeAroma", len: 0.1, area: [0, 32] },
  { title: "谐调", key: "smokeHarmony", len: 0.1, area: [0, 6] },
  { title: "杂气", key: "smokeImpure", len: 0.1, area: [0, 12] },
  { title: "刺激性", key: "smokeThrill", len: 0.1, area: [0, 20] },
  { title: "余味", key: "smokeAftertaste", len: 0.1, area: [0, 25] },
];
async function inp_blue(row: any, key: string) {
  console.log(row, key);
  let loop = false;
  let tipText = `修改失败，字段值不能为空`;
  let dict = dicts.find((ele) => {
    return ele.key == key;
  });
  let value = row[key];
  if (dict && dict.len) {
    value = (value || 0) * 1;
  }
  if (!value) {
    loop = true;
    tipText = `修改失败，${dict.title || ""}字段值只能为数字`;
  } else {
    if (dict) {
      let len = (dict.len || 1) * 10;
      let area = dict.area || [0, 100];

      if ((value * 10) % len !== 0 || value < area[0] || value > area[1]) {
        loop = true;
        tipText = `修改失败，${dict.title || ""}步长为${dict.len},取值范围为${area[0]}~${area[1]}`;
      }
    }
  }

  if (loop) {
    let a = oldList.find((ele: any) => {
      return ele.id == row.id;
    });
    if (a) {
      row[key] = a[key];
    }
    row.smokeTotal = getTotal(row);
    return layer.msg(tipText, { icon: 2, time: 1500 });
  }
  row.smokeTotal = getTotal(row);
  const res = await http.corsApi("/smokeMeeting/contrast", "put", { ...row });
  console.log(res);
  if (res.data) {
    layer.msg("修改成功", { icon: 1, time: 1500 });
  }

  await get_list();
}

function getTotal(form: any) {
  let total = 0;
  dicts.forEach((ele) => {
    let value = (form[ele.key] || 0) * 1;
    total += value;
  });
  return total.toFixed(1);
}

// 关闭
const close = () => {
  router.go(-1);
  //   router.push("/smokePanel/metting");
};
</script>
    
  <style scoped lang="scss">
.detail {
  width: 100%;
  height: calc(100% - 42px);
  display: flex;
  flex-direction: column;
  &_title {
    width: 100%;
    padding: 15px 15px 20px 0;
    box-sizing: border-box;
    background-color: #fff;
    h1 {
      font-size: 20px;
    }
  }
  &_content {
    width: 100%;
    height: calc(100% - 120px);
    > div {
      width: 90%;
      margin: 15px auto 0px;
      height: 100%;
      // background-color: #fff;
      table {
        width: 100%;
        text-align: center;
        background-color: #fff;
        th {
          padding: 8px;
          box-sizing: border-box;
          border: 1px solid #ccc;
        }
        tr {
          td {
            padding: 8px;
            box-sizing: border-box;
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
}

.layui-container {
  padding: 0;
}

.layui-tab {
  margin: 0;
  background-color: #fff;
  :deep(.layui-tab-content) {
    display: none;
  }

  :deep(.layui-tab-title) {
    height: 40px;
    .layui-this {
      // background-color: #b8ddff;
    }
  }
  :deep(.layui-tab-title li) {
    line-height: 40px;
    padding: 0 15px;
    border-bottom: 0 none;
  }
}

.dot {
  display: inline-block;
  background-color: whitesmoke;
  margin-right: 8px;
  border-radius: 50px;
  height: 8px;
  width: 8px;
}
.dot-this {
  background-color: var(--global-primary-color) !important;
}

:deep(.el-scrollbar) {
  background: #fff;
}
</style> 